<template>
 <el-checkbox
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    >全选</el-checkbox
  >
  <el-checkbox-group
    v-model="checkedTechnology"
    @change="handleCheckedCitiesChange"
  >
    <el-checkbox v-for="technologyItem in checkboxData" :key="technologyItem.id" :label="technologyItem.id">{{
      technologyItem[name]
    }}</el-checkbox>
  </el-checkbox-group>
</template>

<script setup >
/* 多选框组件 该组件关联状态管理的数据 需要父组件传递v-module的数据
  该组件需要三个属性  
  1.name为多选框数据的文本值
  2.checkboxData为多选框数据
  3.technology为多选框数据传递出去的数据
*/

import { ref } from 'vue'
const checkAll = ref(false)
const isIndeterminate = ref(true)

// const props = defineProps(['technology','data'])
const props = defineProps({
  technology: {
    type: Array,
    default:[]
  },
  checkboxData:{
    type: Array,
    default:[]
  },
  name:{
    type: String,
    default:'name'
  },
})

const emits = defineEmits(['update:technology'])
const checkedTechnology = ref(props.technology)
const handleCheckAllChange = (val) => {

  checkedTechnology.value = val ? props.checkboxData.map((item)=>item.id) : []
  isIndeterminate.value = false
  emits('update:technology',checkedTechnology)
}
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === props.checkboxData.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.checkboxData.length
  emits('update:technology',checkedTechnology)
}

</script>
<style scoped>
.el-checkbox{
  margin-right: 10px;
}
</style>